<template>
	<view class="content">
		<headerTop title="首页"></headerTop>
		<view class="header con_auto">
			<view class="header_li" @tap.stop="$navTo('/pages/work/user_list/user_list?is_user=Y')">
				<view class="title">会员资产</view>
				<view class="desc">{{ dataInfo.member_count }}</view>
			</view>
			<view class="header_li" @tap.stop="$navTo('/pages/work/user_list/user_list?is_user=N')">
				<view class="title">非会员资产</view>
				<view class="desc">{{ dataInfo.not_member_count }}</view>
			</view>
		</view>
		<view class="notice" v-if="notice_list.length > 0">
			<u-notice-bar :text="notice_list" direction="column" color="#303133" mode="link" bgColor="#fff" keyName="title" @click="to_detail"></u-notice-bar>
		</view>
		<view class="grid con_auto">
			<u-cell title="商机发现" :border="false"></u-cell>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex" @tap="$navTo(baseListItem.page)">
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx', paddingBottom: '0rpx', marginBottom: '20rpx', height: '60rpx' }" :name="baseListItem.name"></u-icon>
					<text class="grid-text" style="margin-bottom: 20rpx">{{ baseListItem.title }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="grid con_auto">
			<u-cell title="绩效目标" :border="false"></u-cell>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(baseListItem, baseListIndex) in baseList1" :key="baseListIndex" @tap="$navTo(baseListItem.page)">
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx', paddingBottom: '0rpx', marginBottom: '20rpx', height: '60rpx' }" :name="baseListItem.name" :size="28"></u-icon>
					<text class="grid-text" style="margin-bottom: 20rpx">{{ baseListItem.title }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<workTabbar :value="0"></workTabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			notice_list: [],
			notice_id: [],
			baseList: [
				{
					name: '/static/home/birthday.png',
					title: '生日',
					page: '/pages/work/birthday/birthday'
				},
				{
					name: '/static/home/jinian.png',
					title: '结婚纪念日',
					page: '/pages/work/marry/marry'
				},
				{
					name: '/static/home/jihua.png',
					title: '服务计划',
					page: '/pages/work/follow/follow'
				},
				{
					name: '/static/home/status.png',
					title: '会员状态',
					page: '/pages/work/user_status/user_status'
				},
				// {
				// 	name: '/static/home/xiansuo.png',
				// 	title: '重要线索'
				// },
				{
					name: '/static/home/notice.png',
					title: '跟进提醒',
					page: '/pages/work/follow_list/follow_list'
				},
				{
					name: '/static/home/tuijian.png',
					title: '推荐人员',
					page: '/pages/work/recommend/recommend'
				}
			],
			baseList1: [
				{
					name: '/static/home/tuiguang.png',
					title: '活动推广'
				},
				{
					name: '/static/home/add-user.png',
					title: '添加好友',
					page: '/pages/work/qr_code/qr_code'
				},
				{
					name: '/static/home/register.png',
					title: '新会员注册'
				},
				{
					name: '/static/home/bindrole.png',
					title: '老会员绑定'
				},
				{
					name: '/static/home/002-group.png',
					title: '会员转化'
				},
				{
					name: '/static/home/order_data.png',
					title: '业绩分析',
					page: '/pages/work/performance/performance'
				}
			],
			dataInfo: {}
		};
	},
	onLoad() {
		let _this = this;
		this.$initConfig().then(() => {
			this.getMemberInfo();
		});
		this.getNoticeList();
	},
	methods: {
		getMemberInfo() {
			let _this = this;
			_this.$http('user/getMemberInfo').then((res) => {
				if (res.code) {
					_this.dataInfo = res.data;
				}
			});
		},
		getNoticeList() {
			this.$http('notice/getNoticeList', {}).then((res) => {
				if (res.code) {
					let list = [];
					let ids = [];
					if (res.data.length > 0) {
						res.data.forEach((item) => {
							list.push(item.title);
							ids.push(item.id);
						});
					}
					this.notice_list = list;
					this.notice_id = ids;
				}
			});
		},
		to_detail(idx) {
			this.$navTo('/pages/work/notice_detail/notice_detail?id=' + this.notice_id[idx]);
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	background-color: $common-color-primary;
	height: 200rpx;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 20rpx;
	&_li {
		color: #fff;
		text-align: center;
		.title {
			font-size: 28rpx;
		}
		.desc {
			font-size: 38rpx;
			margin-top: 10rpx;
		}
	}
}
.notice {
	margin-top: 20rpx;
}
.grid {
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding-bottom: 20rpx;
	.grid-text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}
}
</style>
